<template>
	<div class="container">
		<el-row>
			<el-col v-if="isHead" style="display: flex">
				<el-col v-for="item in headData" :key="item.value" :span="12">
					<div class="general-purpose">
						<span>{{ item.label }}</span>
						<br />
						<span>{{ formatValue(item) }}</span>
					</div>
				</el-col>
			</el-col>
			<el-col v-for="item in data" :key="item.value" :style="{ marginTop: props.marginTop + 'px' }">
				<div class="system-success-rate">
					<div :style="{ marginBottom: 13 + 'px' }">
						<!-- paddingRight: item.value > 20 && item.value <= 100 ? 95 - item.value + '%' : item.value >= 100 ? 5 + '%' : 77 + '%', -->
						<span style="white-space: nowrap">{{ item.label }}</span>
						<span>{{ formatValue(item) }}</span>
					</div>
					<el-progress
						:percentage="getValueBasedOnColor(item.type, item.value).width >= 100 ? 100 : getValueBasedOnColor(item.type, item.value).width"
						:stroke-width="10"
						:show-text="false"
						:style="{
							'--color': item.color,
							'--color-start': item.type ? getValueBasedOnColor(item.type, item.value).color : item.colorStart,
							'--width': item.value > 100 ? 100 + '%' : item.value + '%',
						}"
					></el-progress>
				</div>
				<!-- :format="format" -->
				<!-- :style="{ '--color': item.color, '--color-start': item.colorStart, '--width': item.value > 100 ? 100 + '%' : item.value + '%' }" -->
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
import { getValueBasedOnColor } from '@/utils/common';
import { onMounted, reactive, computed } from 'vue';
interface Data {
	label: string;
	value: number;
	type?: number;
	isTime?: boolean;
	isUser?: boolean;
	color?: string;
	colorStart?: string;
}
interface Props {
	title: string;
	headData: Data[];
	data: Data[];
	marginTop?: number;
	isHead?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
	title: '',
	marginTop: 20,
	isHead: true,
	isUser: false,
	headData: () => [],
	data: () => [],
});
const format = (percentage: any) => (percentage === 100 ? '100%' : `${percentage}%`);
function formatValue(row: any) {
	if (row.isUser) {
		return row.value + '个';
	}
	if (row.isTime) {
		return row.value / 1000 + 'ms';
	}
	if (row.isBrowse) {
		return row.value + '次';
	}
	if (row.isMinutes) {
		return row.value + '分钟';
	}

	return row.value + '%';
}
</script>
<style scoped lang="scss">
@import './index.scss';
@import '@/styles/variables.module.scss';
.container {
	.system-success-rate {
		div {
			&:nth-of-type(1) {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
	:deep(.el-progress-bar__outer) {
		overflow: visible;
		// overflow: hidden;
	}
	:deep(.el-progress-bar__inner) {
		height: 100%;
		position: relative;
		// width: var(--width) !important;
		// background: linear-gradient(to left, var(--color), var(--color-start)); /* 设置渐变色 */
		background: var(--color-start); /* 设置渐变色 */
		// &::before {
		// 	content: '';
		// 	width: 2px;
		// 	/*根据宽度撑开高度*/
		// 	height: 30px;
		// 	background-color: var(--color);
		// 	/*因为伪类默认是行内元素*/
		// 	display: block;
		// 	position: absolute;
		// 	right: 0;
		// 	top: 50%;
		// 	transform: translate(0, -50%);
		// }
	}
}
</style>
